<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1529404_jyvpe4cjb3m.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>首页</title>
    <style>
        html,body{
            background-color: #F7F7F7;
        }
       .header .middle .iconfont{
          font-size: .24rem;
          margin-left: .08rem;
          position: relative;
          top: .04rem;
       }
       .header .middle span{
          font-size: .36rem;
          margin-right: .08rem;
          font-weight: normal;
       }
       .main{
           width: 100%;
           height: auto;
       }
       .main .menu{
           width: 100%;
           height: .76rem;
           overflow-x: scroll;
           overflow-y: visible;
           white-space: nowrap;
           padding: 0 .3rem;
           position: relative;
           border-bottom: 1px solid #E8E8E8;
       }
       .main .menu .item{
            display: inline-block;
            width: auto;
            font-size:.3rem;
            font-family:PingFang SC;
            color:rgba(51,51,51,1);
            font-weight:400;
            margin-right: .63rem;
            padding-bottom: .12rem;
            padding-top: .15rem;
       }
       .main .menu .item.active{
            font-weight:bold;
            color:rgba(255,117,102,1);
            border-bottom: 2px solid #FF7566;
            border-bottom-left-radius: .05rem;
            border-bottom-right-radius: .05rem;
       }
       .main .menu .item:last-child{
           padding-right: .3rem;
       }
       .main .line{
            width:7.49rem;
            height:1px;
            background:rgba(232,232,232,1);
            margin: 0 auto;
            position: absolute;
            left: 0;
            top: .72rem;
       }
       .main .car{
           width: 100%;
           height: 4.14rem;
           overflow: hidden;
           background-color: #fff;
           border-radius:0px 0px .2rem .2rem;
       }
        .main .car .car-img{
            width: 100%;
            height: 2.27rem;
            margin-top: .47rem;
        }
        .main .car .car-img img{
            max-width: 4.8rem;
            height: auto;
            object-fit: cover;
        }
        .main .car .info{
            width: 100%;
            height: 1.37rem;
        }
        .main .car .info .item{
            text-align: center;
        }
        .main .car .info .item .a{
            font-size:.3rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(255,117,102,1);
            margin-bottom: .1rem;
        }
        .main .car .info .item .b{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .main .address{
            width: 6.9rem;
            min-height: 3.5rem;
            background-color: #fff;
            border-radius:.2rem;
            margin: .2rem auto 0;
            padding: .3rem;
            padding-bottom: .9rem;
        }
        .main .address .start-ads{
            width: 100%;
            padding-left: .39rem;
        }
        .main .address .start-ads .a{
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
            margin-bottom: .12rem;
        }
        .main .address .start-ads .b{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .main .address .end-ads{
            width: 100%;
            padding-left: .39rem;
            margin-top: .28rem;
        }
        .main .address .end-ads .a{
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
            margin-bottom: .12rem;
        }
        .main .address .end-ads .b{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .main .address .add-ads{
            width:1.94rem;
            height: .5rem;
            float: right;
            border:1px solid rgba(255,108,100,1);
            border-radius:.12rem;
            text-align: center;
            color:rgba(255,117,102,1);
            margin-top: .2rem;
        }
        .main .address .add-ads span{
            font-size:.2rem;
            font-family:PingFang SC;
            font-weight:400;
        }
        .main .address .add-ads i{
            font-size: .2rem;
        }
        .get-car{
            width:5rem;
            height:.97rem;
            background:rgba(255,117,102,1);
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(255,255,255,1);
            float: left;
        }
        .yuyue{
            width:2.5rem;
            height:.97rem;
            background:rgba(253,165,121,1);
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(255,255,255,1);
            float: left;
        }
        /* user-info */
        .user-info{
            width: 5.49rem;
            height: 100vh;
            background-color: #fff;
            position: fixed;
            left: -5.49rem;
            top: 0;
            z-index: 1100;
            transition: .3s width;
            -webkit-transition: .3s width;
            padding-left: .49rem;
            padding-top: .88rem;
        }
        .userinfoactive{
            left:0;
        }
        .user-info .user{
             width: 100%;
             height: auto;
             overflow: hidden;
        }
        .user-info .user .left{
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            overflow: hidden;
        }
        .user-info .user .left img{
            object-fit: cover;
        }
        .user-info .user .right{
            margin-left: .31rem;
        }
        .user-info .user .right .name{
            font-size:.36rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(51,51,51,1);
        }
        .user-info .user .right .phone{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .user-info .user-menu{
            width: 100%;
            padding-bottom: .6rem;
            border-bottom: 1px solid #E8E8E8;
        }
        .user-info .item{
            margin-top: .6rem;
        }
        .user-info .item .iconfont{
            font-size: .32rem;
            margin-right: .18rem;
        }
        .user-info .item .txt{
            font-size:.3rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .user-info .user-menu .iconfont{
            color: #FF6C64;
        }
        .user-info .sys-menu .iconfont{
            color: #999999;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="header flex align-items space-between">
            <div class="back flex align-items flex-start">
               <i class="iconfont iconxingzhuang12"></i>
            </div>
            <div class="middle flex align-items flex-center">
                <span>郑州</span>
                <i class="iconfont icondown"></i>
            </div>
            <div class="right flex align-items flex-end">
                <i class="iconfont iconxingzhuang18"></i>
            </div>
        </div>
        <div class="main">
            <div class="menu scrollbar-hide flex align-items">
                <div class="item">小面包车</div>
                <div class="item active">中面包车</div>
                <div class="item">依维柯</div>
                <div class="item">中货车</div>
                <div class="item">金杯</div>
                <div class="item">金杯</div>
                <div class="item">金杯</div>
            </div>
            <div class="car">
                <div class="car-img fn-ctr">
                    <img src="../../image/car.png" alt="">
                </div>
                <div class="info flex align-items space-around">
                    <div class="item">
                        <div class="a">1吨</div>
                        <div class="b">载重</div>
                    </div>
                    <div class="item">
                        <div class="a">1.9*1.3*1.2米</div>
                        <div class="b">长宽高</div>
                    </div>
                    <div class="item">
                        <div class="a">3.0方</div>
                        <div class="b">载货体积</div>
                    </div>
                </div>
            </div>
            <div class="address">
                <div class="start-ads">
                    <div class="a">绿城广场</div>
                    <div class="b">河南省郑州市二七区橄榄城B座2135室</div>
                </div>
                <div class="end-ads">
                    <div class="a">绿城广场</div>
                    <!-- <div class="b">河南省郑州市二七区橄榄城B座2135室</div> -->
                </div>
                <div class="end-ads">
                    <div class="a">绿城广场</div>
                    <!-- <div class="b">河南省郑州市二七区橄榄城B座2135室</div> -->
                </div>
                <div class="add-ads fn-ctr">
                    <i class="iconfont iconhao"></i>
                    <span>添加收货地址</span>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="get-car fn-ctr"><span>立即叫车</span> </div>
            <div class="yuyue fn-ctr"><span>预约</span> </div>
        </div>
        <div class="mask" style="display: none;"></div>
        <!-- 个人信息弹层 -->
        <div class="user-info">
            <div class="user flex flex-start align-items">
                <div class="left">
                    <img src="../../image/user_heading.png" alt="">
                </div>
                <div class="right">
                    <div class="name">刘凡</div>
                    <div class="phone">13846754891</div>
                </div>
            </div>
            <div class="user-menu">
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang15"></i>
                    <div class="txt">优惠券</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang11"></i>
                    <div class="txt">我的订单</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang10"></i>
                    <div class="txt">我的钱包</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang24"></i>
                    <div class="txt">专属司机</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang23"></i>
                    <div class="txt">意向司机</div>
                </div>
            </div>
            <div class="sys-menu">
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang13"></i>
                    <div class="txt">分享</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang21"></i>
                    <div class="txt">收费标准</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang20"></i>
                    <div class="txt">客服</div>
                </div>
                <div class="item flex flex-start align-items">
                    <i class="iconfont iconxingzhuang22"></i>
                    <div class="txt">设置</div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/api.js"></script>
    <script src="../../js/vue-components.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/common.js"></script>
    <script>
        api_init = function(){
            var root = new Vue({
                el:'#root',
            })
        }
    </script>
</body>
</html>